<template>
  <div class="c-warn-box">
    <div class="warn-icon-box">
      <div :class="'warn-icon '+name "></div>
    </div>
    <div class="warn-title">
      <span>{{title}}</span>
    </div>
    <div class="warn-tips">
      <span>{{tips}}</span>
    </div>
  </div>
</template>

<script>
  module.exports = {
    props: {
      'title': {
        type: String,
        default: ''
      },
      'tips': {
        type: String,
        default: ''
      },
      'name': {
        type: String,
        default: 'no-device'
      }
    }
  }

</script>
<style lang="stylus">
  @import '../assets/style/common'

  .c-warn-box
    width 100%
    height auto
    margin-bottom 1rem
    font-weight bold
    .warn-icon-box
      width 100%
      height 7.6rem
      overflow hidden
      .warn-icon
        width 2.5rem
        height 2.5rem
        margin 4.5rem auto auto
        /*background center center / 100% 100%*/
        background-size 100% 100%
        background-position center center
    .warn-title
    .warn-tips
      width 100%
      height auto
      text-align center
      font-size 0.62rem
      color #fff
      padding 0 2rem
      box-sizing border-box
      text-shadow 0 0.1rem 0.2rem rgba(0,0,0,0.3)
    .warn-tips
      color rgba(255,255,255,0.6)
      margin-top 0.3rem
      padding 0 1.5rem
      font-size 0.4rem

</style>
